<template>
  <div class="every-day-playlist">
    <page-list-layout>
      <template v-slot:one>
        <div class="content w-full" :class="store.isFlag ? ' flex items-center' : ''">
          <daily-recommendation class="flex-1"/>
          <div class="" :class="store.isFlag ? 'w-1/2 text-4xl ml-4 ' : 'mt-2' ">根据你的口味生成，每天6:00更新</div>
        </div>
      </template>
      <template v-slot:two>
        <header-actions
            :songs="dailySongs"
            :isAddMusicList="false"
            :isShare="false"
            :isDownload="false"
            :isReview="false"
        />
      </template>
      <template v-slot:three>
        <music-list
            :paginationPlaylist="dailySongs"
            :noShowPage="false"
        />
      </template>
      <template v-slot:top>
        <div>
          <home-nav title="个性化推荐如何工作" :more="false"/>
          <div>
            <span
                class="block">它聪明、熟悉每个用户的喜好，从海量音乐中挑选出你可能喜欢的音乐。 它通过你每一次操作来记录你的口味</span>
            <span class="block">它通过你每一次操作来记录你的口味</span>
          </div>
          <div class="pt-2 pb-2 flex flex-col">
            <span>播放了<span class="yu-titleColor">{{ store.allUserInfo.listenSongs }}</span>首音乐</span>
            <span class="pt-2 pb-2">共有<span class="yu-titleColor">{{
                store.allUserInfo?.profile?.playlistCount
              }}</span>个歌单</span>
          </div>
          <div>你提供给云音乐的信息越多，它就越了解你的音乐喜好。</div>
        </div>
      </template>
    </page-list-layout>
  </div>
</template>

<script setup>
import PageListLayout from '@/components/PageListLayout/index.vue'
import DailyRecommendation from '@/components/DailyRecommendation/index.vue'
import {getRecommendSongs} from "@/api/home/index"
import {useStore} from "@/store/index"
// 操作按钮，比如播放按钮，添加收藏
import HeaderActions from '@/components/HeaderActions/index.vue'
// 歌曲列表
import MusicList from '@/components/MusicList/index.vue'
import HomeNav from '@/components/HomeNav/index.vue'

import {reactive, toRefs} from "vue"

const store = useStore()
const data = reactive({
  dailySongs: [] // 歌曲列表数据
})
const {dailySongs} = toRefs(data)

// 将播放的标识设置为3，为了在每日歌曲点击全部播放的时候可以播放
store.currentInfo.type = 3

getRecommendSongs().then(res => {
  if (Number(res.code) === 200) {
    data.dailySongs = res.data.dailySongs
  }
})
</script>

<style scoped>

</style>
